<!DOCTYPE html>
<html>

<head>
	<title>矩阵特效</title>
	<meta charset="utf-8" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		body {
			font-size: 12px;
			font-family: "微软雅黑";
			color: #666;
		}
	</style>
</head>

<body>
	<canvas id="mycanvas"> </canvas>

	<script type="text/javascript">
	//获取屏幕尺寸
		var winW = window.screen.width;
		var winH = window.screen.height;
		var canvas = document.getElementById("mycanvas");
		canvas.width = winW;
		canvas.height = winH;
		// canvas.getContext(contextID) 方法返回一个用于在画布上绘图的环境。
		// 参数 contextID 指定了您想要在画布上绘制的类型。
		// 当前唯一的合法值是 "2d"，它指定了二维绘图
		var cxt = canvas.getContext("2d");
		// fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式
		cxt.fillStyle = "black";
		// fillRect(x, y, width, height) 填充一个矩形
		// x,y表示矩形的左上角的坐标。width,height表示矩形的大小
		cxt.fillRect(0,0,winW,winH);

	//确定屏幕出现字幕的栏数
		var str = "夏有乔木雅望天堂！！！";
		var fontSize = 15;
		var clos = Math.floor(winW/fontSize);
		
	//初始化纵坐标
		var array = new Array();
		for (var i=0;i<clos;i++){
			array.push(Math.random()*winH);
		}
	//画出字幕
		function drawStr(){
			cxt.fillStyle = "rgba(0,0,0,0.3)";
			cxt.fillRect(0,0,winW,winH);
			cxt.font = "700 "+fontSize+"px 微软雅黑";
			cxt.fillStyle = randomColor();
			// 遍历列
			for (var i = 0; i < clos; i++){
				var x = fontSize*i;
				var y = array[i]*fontSize;
				var indexStr = Math.floor(Math.random()*str.length);
				
				// fillText() 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
				cxt.fillText(str[indexStr],x,y);
				if(y>canvas.height && Math.random()>0.96){
					array[i] = 0;
				}
				array[i]++;
			}
		}
	//随机生成字体颜色
		function randomColor(){
			var R = Math.floor(Math.random()*256);
			var G = Math.floor(Math.random()*256);
			var B = Math.floor(Math.random()*256);
			return "rgb"+"("+R+","+G+","+B+")";
		}
		
	setInterval(drawStr,100);
	
	</script>

</body>

</html>